<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>小米官网</title>
    <link rel="stylesheet" href="./css/index.css" />
  </head>
  <body>
    <!-- 头部快捷标题 -->
    <div class="shortcut">
      <ul class="wrapper">
        <li><a href="#">小米网</a></li>
        <li><a href="#">MIUI</a></li>
        <li><a href="#">米聊</a></li>
        <li><a href="#">游戏</a></li>
        <li><a href="#">多看阅读</a></li>
        <li><a href="#">云服务</a></li>
        <li><a href="#">小米网移动版</a></li>
        <li><a href="#">问题反馈</a></li>
        <li><a href="#">Select Region</a></li>
      </ul>
    </div>
    <!-- 导航栏 -->
    <div class="header wrapper">
      <!-- logo -->
      <div class="logo">
        <img src="./images/logo.png" alt="" />

        <img src="./images/new.gif" alt="" />
      </div>

      <!-- 导航 -->
      <div class="nav">
        <ul>
          <li><a href="#">小米手机</a></li>

          <li><a href="#">红米</a></li>

          <li><a href="#">平板</a></li>

          <li><a href="#">电视</a></li>

          <li><a href="#">盒子·影音</a></li>

          <li><a href="#">路由器</a></li>

          <li><a href="#">智能硬件</a></li>

          <li><a href="#">服务</a></li>

          <li><a href="#">社区</a></li>
        </ul>
      </div>
    </div>
    <!-- banner -->
    <div class="banner wrapper">
      <!-- 侧导航 ul -->
      <div class="subnav">
        <ul>
          <li>
            <div>
              <a href="#" class="classify">手机</a><a href="#">平板</a
              ><a href="#">电话卡</a>
            </div>

            <span>></span>
          </li>

          <li>
            <div><a href="#" class="classify">电视</a><a href="#">盒子</a></div>

            <span>></span>
          </li>

          <li>
            <div>
              <a href="#" class="classify">路由器</a><a href="#">智能硬件</a>
            </div>

            <span>></span>
          </li>

          <li>
            <div>
              <a href="#" class="classify">移动电源</a><a href="#">插线板</a>
            </div>

            <span>></span>
          </li>

          <li>
            <div><a href="#" class="classify">耳机</a><a href="#">音箱</a></div>

            <span>></span>
          </li>

          <li>
            <div>
              <a href="#" class="classify">电池</a><a href="#">存储卡</a>
            </div>

            <span>></span>
          </li>

          <li>
            <div>
              <a href="#" class="classify">保护套</a><a href="#">后盖</a>
            </div>

            <span>></span>
          </li>

          <li>
            <div>
              <a href="#" class="classify">贴膜</a><a href="#">其他配件</a>
            </div>

            <span>></span>
          </li>

          <li>
            <div><a href="#" class="classify">米兔</a><a href="#">服装</a></div>

            <span>></span>
          </li>

          <li>
            <div>
              <a href="#" class="classify">箱包</a><a href="#">其他周边</a>
            </div>

            <span>></span>
          </li>
        </ul>
      </div>
      <!-- 图片 -->
      <img class="pic" src="./images/banner.png" alt="" />
    </div>
    <!-- 图片--空色块 -->
    <div
      class="center wrapper"
      style="display: flex; justify-content: space-between"
    >
      <div style="display: flex; margin-top: 20px; margin-bottom: 80px">
        <div
          style="
            background-color: gray;
            width: 210px;
            margin-right: 15px;
            text-align: center;
            padding-top: 50px;
          "
        >
          我就是一个空色块
        </div>
        <img
          style="width: 330px; margin-right: 15px"
          src="./images/pro1.png"
          alt=""
        />
        <img
          style="width: 330px; margin-right: 15px"
          src="./images/pro2.png"
          alt=""
        />
        <img style="width: 330px" src="./images/pro3.png" alt="" />
      </div>
    </div>
    <!-- 智能硬件 -->
    <div style="background-color: rgb(242, 240, 240)">
      <div class="zn wrapper">
        <!-- 标题 -->
        <div class="title">
          <p>智能硬件</p>
          <p>查看全部</p>
        </div>
        <!-- 内容 -->
        <div class="content">
          <div class="left">
            <a href="#"
              ><img style="height: 656px" src="./images/girl.jpg" alt=""
            /></a>
          </div>

          <div class="right">
            <ul>
              <li>
                <a href="#">
                  <div class="pic">
                    <img src="./images/d1.jpg" alt="" />
                  </div>

                  <div class="txt">
                    <h4>小米路由器</h4>

                    <p>四天线设计，更安全更稳定</p>
                    <p class="price"><span>149元</span></p>
                  </div>
                </a>
                <span class="small">免邮费</span>
              </li>
              <li>
                <a href="#">
                  <div class="pic">
                    <img src="./images/d2.jpg" alt="" />
                  </div>

                  <div class="txt">
                    <h4>米家 LED 智能台灯</h4>

                    <p>无可视频闪，亮度色温无级调节</p>
                    <p class="price"><span>169元</span></p>
                  </div>
                </a>
              </li>
              <li>
                <a href="#">
                  <div class="pic">
                    <img src="./images/d3.jpg" alt="" />
                  </div>

                  <div class="txt">
                    <h4>小米净水器 厨下式</h4>

                    <p>RO反渗透直出纯净水，包邮包安装</p>
                    <p class="price"><span>1999元</span></p>
                  </div>
                </a>
                <span class="small">免邮费</span>
              </li>
              <li>
                <a href="#">
                  <div class="pic">
                    <img src="./images/d4.jpg" alt="" />
                  </div>

                  <div class="txt">
                    <h4>小蚁智能摄像机 夜视版</h4>

                    <p>能看能听能说，手机远程观看</p>
                    <p class="price"><span>149元</span></p>
                  </div>
                </a>
              </li>
              <li>
                <a href="#">
                  <div class="pic">
                    <img src="./images/d5.jpg" alt="" />
                  </div>

                  <div class="txt">
                    <h4>Yeelight床头灯</h4>

                    <p>触摸式操作，给卧室1600万种颜色</p>
                    <p class="price"><span>249元</span></p>
                  </div>
                </a>
              </li>
              <li>
                <a href="#">
                  <div class="pic">
                    <img src="./images/d6.jpg" alt="" />
                  </div>

                  <div class="txt">
                    <h4>小米空气净化器2</h4>

                    <p>10分钟，房间空气焕然一新</p>
                    <p class="price"><span>699元</span></p>
                  </div>
                </a>
              </li>
              <li>
                <a href="#">
                  <div class="pic">
                    <img src="./images/d7.jpg" alt="" />
                  </div>

                  <div class="txt">
                    <h4>小米智能安防套装</h4>

                    <p>智能警戒，为您的家增添一份安心</p>
                    <p class="price">
                      169元<span
                        style="color: gray; text-decoration-line: line-through"
                        >188元</span
                      >
                    </p>
                  </div>
                </a>
                <span class="big">享9折</span>
              </li>
              <li>
                <a href="#">
                  <div class="pic">
                    <img src="./images/d8.jpg" alt="" />
                  </div>

                  <div class="txt">
                    <h4>米家iHealth血压计</h4>

                    <p>爸妈上手就会用的智能血压计</p>
                    <p class="price"><span>399元</span></p>
                  </div>
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <!-- 帮助中心 -->
    <div class="help wrapper">
      <div class="left">
        <dl>
          <dt>帮助中心</dt>

          <dd><a href="#">账户管理</a></dd>

          <dd><a href="#">购物指南</a></dd>

          <dd><a href="#">订单操作</a></dd>
        </dl>

        <dl>
          <dt>服务支持</dt>

          <dd><a href="#">售后政策</a></dd>

          <dd><a href="#">自助服务</a></dd>

          <dd><a href="#">相关下载</a></dd>
        </dl>

        <dl>
          <dt>线下门店</dt>

          <dd><a href="#">平台规则</a></dd>

          <dd><a href="#">联系我们</a></dd>

          <dd><a href="#">问题反馈</a></dd>
        </dl>

        <dl>
          <dt>售后服务</dt>

          <dd><a href="#">小米之家</a></dd>

          <dd><a href="#">服务网点</a></dd>

          <dd><a href="#">零售网点</a></dd>
        </dl>

        <dl>
          <dt>关于小米</dt>

          <dd><a href="#">了解小米</a></dd>

          <dd><a href="#">加入小米</a></dd>

          <dd><a href="#">联系我们</a></dd>
        </dl>
        <dl>
          <dt>关注我们</dt>

          <dd><a href="#">新浪微博</a></dd>

          <dd><a href="#">小米部落</a></dd>

          <dd><a href="#">官方微信</a></dd>
        </dl>
        <dl>
          <dt>特色服务</dt>

          <dd><a href="#">F 码通道</a></dd>

          <dd><a href="#">小米移动</a></dd>

          <dd><a href="#">防伪查询</a></dd>
        </dl>
      </div>
      <div class="right">
        <div style="color: #ed7130; font-size: 22px; font-weight: 700">
          400-100-5678
        </div>
        <div>周一至周日 8:00-18:00</div>
        <div>（仅收市话费）</div>
      </div>
    </div>
    <!-- 版权 -->
    <div style="background-color: #f5f5f5; position: relative">
      <div class="copyright wrapper">
        <div class="left">
          <img src="./images/logo.png" alt="" />
        </div>
        <div class="right">
          <p>
            <a href="#">小米网</a>| <a href="#">MIUI</a>| <a href="#">米聊</a>|
            <a href="#">多看书城</a>| <a href="#">小米路由器</a>|
            <a href="#">视频电话</a>| <a href="#">小米后院</a>|
            <a href="#">小米天猫店</a>| <a href="#">小米淘宝直营店</a>|
            <a href="#">小米网盟</a>| <a href="#">视频问题反馈电话</a>|
            <a href="#">Select Region</a>
          </p>
          <p>
            mi.com 京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号
            京网文[2014]0059-0009号
          </p>
          <p>
            违法和不良信息举报电话：185-0130-1238，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试
          </p>
        </div>
      </div>
      <img src="./images/bottom.png" alt="" class="bottom-img" />
    </div>
  </body>
</html>
